<template>
  <div class="perm-container">
    <el-card class="box-card" shadow="always">
      <div class="clearfix" slot="header">
        <b>
          <svg-icon icon-class="route"/>
          {{ menu && menu.label ? "【" + menu.label + "】" : "" }}权限分配
        </b>
      </div>
      <el-row style="margin-bottom: 10px">
        <el-col :span="18">
          <el-tag v-if="role" type="primary">{{ role.name }}</el-tag>
          <el-tag v-if="menu" type="success" style="margin-left: 5px">{{ menu.name }}
          </el-tag>
          <el-tag v-if="!role" type="info" style="margin-left: 5px"
          ><i class="el-icon-info"> </i> 请选择角色
          </el-tag>
          <el-tag v-if="!menu" type="info" style="margin-left: 5px"
          ><i class="el-icon-info"> </i> 请选择菜单
          </el-tag>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-button
            type="primary"
            :disabled="disabled || isAuth('sys:role-permission:add')"
            icon="el-icon-check"
            size="mini"
            @click="handleSubmit"
          >提交
          </el-button>
        </el-col>
      </el-row>

      <div v-if="permissionList.length > 0">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          style="margin-top: 20px"
        >全选
        </el-checkbox>
        <el-row>
          <el-col
            :span="8"
            v-for="permission in permissionList"
            style="margin-top: 20px"
          >
            <el-checkbox
              border
              v-model="permission.checked"
              :label="permission.id"
              :key="permission.id"
              @change="handleCheckChange"
              size="mini"
            >
              {{ permission.description }}
            </el-checkbox>
          </el-col>
        </el-row>
      </div>
      <div style="text-align: center" v-else>
        <el-empty :description=" !role? '请选择角色': !menu? '请选择菜单': '暂无数据，您可在【菜单管理】配置权限数据'"></el-empty>
      </div>
    </el-card>
  </div>
</template>

<script>
import {listPermissionByMenuId} from "@/api/system/permission";
import {listRolePermission, updateRolePermission} from "@/api/system/role";

export default {
  name: "Permission",
  computed:{
    disabled() {
      let b = false
      if (this.role) {
        const roleId = this.$store.getters.roleId;
        b = roleId.indexOf(this.role.roleId) == -1;
      }
      return !(this.role && this.menu && this.permissionList.length > 0 && b)
    }
  },
  data() {
    return {
      loading: false,
      ids: [],
      initialCheckedPermissionIds: [],
      menu: undefined,
      role: undefined,
      isIndeterminate: true,
      checkAll: false,
      permissionList: [],
      isRoot: false,
    };
  },
  methods: {
    async handleQuery() {
      this.loading = true;
      const menuId = this.menu.menuId;
      await listPermissionByMenuId({
        menuId: menuId
      }).then((response) => {
        const {data} = response;
        if (this.role.code == this.ROOT_ROLE_CODE) {
          // 如果是超级管理员默认勾选全部且不可编辑
          this.isRoot = true
          this.checkAll = true
          this.isIndeterminate = false
          data.map((item) => this.$set(item, "checked", true))
          this.permissionList = data
          this.loading = false
        } else {
          this.isRoot = false;
          if (data) {
            listRolePermission(this.role.roleId, {menuId: menuId}).then((res) => {
              this.initialCheckedPermissionIds = res.data;
              let checkAll = true
              data.map((item) => {
                if (this.initialCheckedPermissionIds.includes(item.id)) {
                  item.checked = true;
                } else {
                  checkAll = false
                }
              });
              this.checkAll = checkAll
              if (checkAll) {
                this.isIndeterminate = false
              }
              this.permissionList = data;
              this.loading = false;
            })
          }
        }
      })
    },
    menuClick(menu, role) {
      this.role = role;
      this.menu = menu;

      if (role && menu) {
        this.handleQuery();
      } else {
        this.permissionList = [];
        this.initialCheckedPermissionIds = [];
      }
    },
    handleSubmit: function () {
      const checkedPermissionIds = this.permissionList
        .filter((item) => item.checked)
        .map((item) => item.id);
      // 判断选中权限是否变动
      if (
        this.initialCheckedPermissionIds.length ==
        checkedPermissionIds.length &&
        this.initialCheckedPermissionIds.sort().every(function (v, i) {
          return v == checkedPermissionIds[i];
        })
      ) {
        this.$message.warning("数据未变动");
        return;
      }
      updateRolePermission(
        this.menu.menuId,
        this.role.roleId,
        checkedPermissionIds
      ).then((response) => {
        if (response.status) {
          this.initialCheckedPermissionIds = checkedPermissionIds
          this.$message.success("提交成功");
        }
      }).then(() => {
        //重新获取用户权限
        this.$store.dispatch('getUserInfo')
      });
    },
    handleCheckAllChange(checked) {
      if (checked) {
        this.permissionList.map((item) => (item.checked = true));
      } else {
        // 全不选
        this.permissionList.map((item) => (item.checked = false));
      }
      this.isIndeterminate = false;
    },
    handleCheckChange(item, val) {
      const checkedCount = this.permissionList.filter(
        (item) => item.checked
      ).length;
      //全选
      this.checkAll = checkedCount === this.permissionList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.permissionList.length;
    },
  },
};
</script>

<style scoped>
.perm-container {
  margin-bottom: 20px;
}
</style>
